<template>
	<view>
		<view class="bind-head">
			<view class="bind-head-img flex-col flex-ali-cen flex-jus-cen">
				<view class="bind-img"></view>
				<view class="bind-head-system">零点娱乐管理系统</view>
			</view>
		</view>
		<view class="bind-content">
			<input class="uni-input" :adjust-position="false" placeholder-style="font-size:28rpx;text-indent:26rpx"
				cursor="20" selection-start="20" v-model="bind_code" style="color: var(--white-text)"
				@confirm="handleSearchClick" placeholder="请输入集团绑定码" />
			<view class="flex-row flex-jus-bet" style="margin-top: 60rpx;">
				<button class="head-btn" type="default" size="mini" @click="scancodes">扫码绑定</button>
				<button @click="goBind" class="head-btn" type="primary" size="mini" :disabled="sure_btn"
					style="margin-left: 10%;">确认绑定</button>
			</view>

		</view>
		<bottom-company-vue :footerStyle="footerStyle"></bottom-company-vue>
	</view>
	<custom-loading-vue ref="loading" @click="closeLoad()"></custom-loading-vue>
</template>

<script>
	import bottomCompanyVue from '@/components/bottomCompany.vue'
	import customLoadingVue from '@/components/customLoading.vue'
	export default {
		components: {
			bottomCompanyVue,
			customLoadingVue
		},
		data() {
			return {
				bind_code: '',
				sure_btn: true,
				footerStyle: {
					position: 'absolute',
					bottom: '20rpx',
					left: 0
				},
				loadStatus: false
			}
		},
		watch: {
			bind_code(val, oldVal) {
				this.sure_btn = val === '';
			}
		},
		mounted() {

		},
		onLoad() {
			this.$commonJs.logger.debug('name', 'warn')
		},
		methods: {
			scancodes() {
				const self = this
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ["barCode", "qrCode"],
					success: function(res) {
						self.bind_code = res.result
						self.goBind()
					},
				})
			},
			handleSearchClick() {
				this.goBind()
			},
			closeLoad() {
				this.$refs.loading.hide()
			},
			goBind() {
				const self = this
				if (self.loadStatus) {
					self.$commonJs.showMessage('请勿重复请求！')
					return
				}
				this.$commonJs.queryCache('/group/bindGroup', {
					code: self.bind_code
				}, {
					before() {
						self.$refs.loading.show('加载中...')
						self.loadStatus = true
					},
					success(res) {
						try {
							const {
								code,
								data,
								msg,
								server_ip
							} = res
							self.$commonJs.systemConfig.groupInfo = data
							self.$commonJs.setStorage(
								'groupInfo',
								data,
								function() {
									uni.reLaunch({
										url: '/pages/login'
									})
								}
							)
						} catch (error) {
							//TODO handle the exception
							self.$commonJs.showMessage(error)
						}
					},
					fail(err) {
						self.$commonJs.logger.debug(err, 'error')
					},
					complete() {
						self.$refs.loading.hide();
						self.loadStatus = false
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.bind-content {
		padding: 0 40rpx;
		margin-top: 100rpx;
	}

	.head-btn {
		width: 45%;
		height: 70rpx;
		line-height: 70rpx;
	}

	.uni-input {
		background-color: var(--bg-center-color);
		width: 100%;
		display: flex;
		height: 78rpx;
		flex: 1;
		text-indent: 20rpx;
		border-radius: 8rpx;
	}

	.bind-head {
		background: var(--bg-center-color);
		height: 460rpx;

		.bind-head-img {
			margin: auto;
			height: 460rpx;
		}
	}

	.bind-img {
		margin-top: 40rpx;
		height: 200rpx;
		width: 200rpx;
		text-align: center;
		background: url('@/static/image/white_logo.png');
		background-size: 100% 100%;
	}

	.bind-head-system {
		font-size: 32rpx;
		font-weight: 600;
		margin-top: 30rpx;
		letter-spacing: 8rpx;
		color: var(--grey-text);
	}

	@media (prefers-color-scheme: dark) {
		.bind-img {
			background: url('@/static/image/black_logo.png') !important;
			background-size: 100% 100% !important;
		}
	}
</style>